Feeds

Feeds

A feed consists of a list of recurring elements of similar types. Examples of a feed would be a discussion feed.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-feed">
  <ul class="slds-feed__list">
    <li class="slds-feed__item">
      <article class="slds-post">
        <header class="slds-post__header slds-media">
          <div class="slds-media__figure">
            <a href="javascript:void(0);" class="slds-avatar slds-avatar_circle slds-avatar_large">
              <img alt="Jason Rodgers" src="/assets/images/avatar1.jpg" title="Jason Rodgers avatar" />
            </a>
          </div>
          <div class="slds-media__body">
            <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
              <p>
                <a href="javascript:void(0);" title="Jason Rodgers">Jason Rogers</a><a href="javascript:void(0);" title="Design Systems">Design Systems</a>
              </p>
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small" aria-haspopup="true" title="More Options">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More Options</span>
              </button>
            </div>
            <p class="slds-text-body_small">
              <a href="javascript:void(0);" title="Click for single-item view of this post" class="slds-text-link_reset">5 days Ago</a>
            </p>
          </div>
        </header>
        <div class="slds-post__content slds-text-longform">
          <p>Hey there! Here&#x27;s the latest demo presentation
            <a href="javascript:void(0);" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
        </div>
        <footer class="slds-post__footer">
          <ul class="slds-post__footer-actions-list slds-list_horizontal">
            <li class="slds-col slds-item slds-m-right_medium">
              <button title="Like this item" class="slds-button_reset slds-post__footer-action" aria-pressed="false">
                <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
                </svg>Like</button>
            </li>
            <li class="slds-col slds-item slds-m-right_medium">
              <button title="Comment on this item" class="slds-button_reset slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share_post"></use>
                </svg> Comment</button>
            </li>
            <li class="slds-col slds-item slds-m-right_medium">
              <button title="Share this item" class="slds-button_reset slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
                </svg> Share</button>
            </li>
          </ul>
          <ul class="slds-post__footer-meta-list slds-list_horizontal slds-has-dividers_right slds-text-title">
            <li class="slds-item">20 shares</li>
            <li class="slds-item">259 views</li>
          </ul>
        </footer>
      </article>
      <div class="slds-feed__item-comments">
        <div class="slds-p-horizontal_medium slds-p-vertical_x-small slds-grid">
          <button class="slds-button_reset slds-text-link">More comments</button>
          <span class="slds-text-body_small slds-col_bump-left">1 of 8</span>
        </div>
        <ul>
          <li>
            <article class="slds-comment slds-media slds-hint-parent">
              <div class="slds-media__figure">
                <a href="javascript:void(0);" class="slds-avatar slds-avatar_circle slds-avatar_medium">
                  <img alt="Jenna Davis" src="/assets/images/avatar2.jpg" title="Jenna Davis avatar" />
                </a>
              </div>
              <div class="slds-media__body">
                <header class="slds-media slds-media_center">
                  <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
                    <p class="slds-truncate" title="Jenna Davis">
                      <a href="javascript:void(0);">Jenna Davis</a>
                    </p>
                    <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small" aria-haspopup="true" title="More Options">
                      <svg class="slds-button__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                      </svg>
                      <span class="slds-assistive-text">More Options</span>
                    </button>
                  </div>
                </header>
                <div class="slds-comment__content slds-text-longform">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                <footer>
                  <ul class="slds-list_horizontal slds-has-dividers_right slds-text-body_small">
                    <li class="slds-item">
                      <button class="slds-button_reset slds-text-color_weak" title="Like this item" aria-pressed="false">Like</button>
                    </li>
                    <li class="slds-item">16hr Ago</li>
                  </ul>
                </footer>
              </div>
            </article>
          </li>
        </ul>
      </div>
    </li>
    <li class="slds-feed__item">
      <article class="slds-post">
        <header class="slds-post__header slds-media">
          <div class="slds-media__figure">
            <a href="javascript:void(0);" class="slds-avatar slds-avatar_circle slds-avatar_large">
              <img alt="Jason Rodgers" src="/assets/images/avatar1.jpg" title="Jason Rodgers avatar" />
            </a>
          </div>
          <div class="slds-media__body">
            <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
              <p>
                <a href="javascript:void(0);" title="Jason Rodgers">Jason Rogers</a><a href="javascript:void(0);" title="Design Systems">Design Systems</a>
              </p>
              <button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small" aria-haspopup="true" title="More Options">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">More Options</span>
              </button>
            </div>
            <p class="slds-text-body_small">
              <a href="javascript:void(0);" title="Click for single-item view of this post" class="slds-text-link_reset">5 days Ago</a>
            </p>
          </div>
        </header>
        <div class="slds-post__content slds-text-longform">
          <p>Hey there! Here&#x27;s the latest demo presentation
            <a href="javascript:void(0);" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
        </div>
        <footer class="slds-post__footer">
          <ul class="slds-post__footer-actions-list slds-list_horizontal">
            <li class="slds-col slds-item slds-m-right_medium">
              <button title="Like this item" class="slds-button_reset slds-post__footer-action" aria-pressed="false">
                <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
                </svg>Like</button>
            </li>
            <li class="slds-col slds-item slds-m-right_medium">
              <button title="Comment on this item" class="slds-button_reset slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share_post"></use>
                </svg> Comment</button>
            </li>
            <li class="slds-col slds-item slds-m-right_medium">
              <button title="Share this item" class="slds-button_reset slds-post__footer-action">
                <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
                </svg> Share</button>
            </li>
          </ul>
          <ul class="slds-post__footer-meta-list slds-list_horizontal slds-has-dividers_right slds-text-title">
            <li class="slds-item">20 shares</li>
            <li class="slds-item">259 views</li>
          </ul>
        </footer>
      </article>
    </li>
  </ul>
</div>

About Base

A discussion feed consists of a list of posts. A .slds-feed__item contains a post and comments related to that post.


About Feeds

Accessibility

Most feeds have a media object containing the user's name and avatar image. If both the image and the name link to the same location, add tab-index="-1" to the <a> element so that assistive technology does not read out duplicate links.


Overview of CSS Classes

Selector.slds-feed
Summary

A discussion feed consists of a list of posts. A .slds-feed__item contains a post and comments related to that post.

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-feed__list
Summary
Restrict.slds-feed ul
Selector.slds-feed__item
Summary
Restrict.slds-feed__list li
Selector.slds-feed__item-comments
Summary

Container for feed item comments

Restrict.slds-feed__item div
Selector.slds-post
Summary
Restrict.slds-feed article
VariantTrue
Selector.slds-post__header
Summary

Header region of a feed post

Restrict.slds-post header
Selector.slds-post__content
Summary

Content region of a feed post

Restrict.slds-post div
Selector.slds-post__footer
Summary

Footer region of a feed post

Restrict.slds-post footer
Selector.slds-post__footer-actions-list
Summary

Footer region that contains quick action items for post

Restrict.slds-post__footer ul
Selector.slds-post__footer-action
Summary

Action items within the feed post footer

Restrict.slds-post__footer-actions-list button
Selector.slds-is-active
Summary

Active state for like button

Restrict.slds-post__footer-action
ModifierTrue
Selector.slds-post__footer-meta-list
Summary

Footer region that contains read only items for post

Restrict.slds-post__footer ul